<template>
  <div class="h-[12rem] p-4 border border-gray-200 rounded-xl transition-all duration-500 hover:border-[--pink-color] hover:scale-105 active:scale-95 active:rotate-[1.7deg] ease-in-out">
    <p class="m-0 text-2xl font-bold text-gray-800">{{ title }}</p>
    <p class="mt-2.5 text-sm text-gray-500 leading-relaxed">{{ description }}</p>
    <el-link class="mt-2.5 inline-block" :href="link" target="_blank">
      <span class="text-[--text-select-color] hover:text-[--pink-color]">{{ link }}</span>
    </el-link>
  </div>
</template>

<script setup>
import { defineProps } from "vue";

const props = defineProps({
  title: {
    type: String,
    default: "Default Title",
  },
  description: {
    type: String,
    default: "This is a sample description for the card.",
  },
  link: {
    type: String,
    default: "#",
  },
});
</script>
